<template>
  <div class="login">
    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
      <h3 class="title">后台管理系统</h3>
      <el-form-item prop="admin_name">
        <el-input
          v-model="loginForm.admin_name"
          type="text"
          size="medium"
          autocomplete="off"
          placeholder="请输入账号"
          prefix-icon="el-icon-user"
        ></el-input>
      </el-form-item>
      <el-form-item prop="admin_password">
        <el-input
          v-model="loginForm.admin_password"
          type="password"
          size="medium"
          autocomplete="off"
          placeholder="请输入密码"
          prefix-icon="el-icon-lock"
          @keyup.enter.native="handleLogin"
        ></el-input>
      </el-form-item>
      <!-- <el-form-item prop="code">
        <el-input
          v-model="loginForm.code"
          autocomplete="off"
          size="medium"
          placeholder="验证码"
          style="width: 63%"
          suffix-icon="el-icon-unlock"
          @keyup.enter.native="handleLogin"
        ></el-input>
        <div class="login-code">
          <img :src="codeUrl" @click="getCode" />
        </div>
      </el-form-item>-->
      <!-- <el-checkbox v-model="loginForm.rememberMe">记住密码</el-checkbox> -->
      <el-form-item class="login-reset">
        <el-button
          :loading="loading"
          size="mini"
          type="primary"
          @click.native.prevent="handleLogin"
        >
          <span v-if="!loading">登 录</span>
          <span v-else>登 录 中...</span>
        </el-button>
        <el-button size="mini" type="info" @click="resetLogin">重置</el-button>
      </el-form-item>
    </el-form>
    <!--  底部  -->
    <div class="el-login-footer">
      <span>Copyright © 2018-2019 ruoyi.vip All Rights Reserved.</span>
    </div>
  </div>
</template>

<script>
import Validate from '@/plugins/validate'

export default {
  name: 'Login',
  data() {
    return {
      codeUrl: '',
      cookiePassword: '',
      //登录表单
      loginForm: {
        admin_name: '', //账号
        admin_password: '' //密码
        // rememberMe: false //是否记住密码
        // code: '', //验证码
        // uuid: ''
      },
      loginRules: Validate.loginRules, //登录验证
      loading: false, //登录加载
      redirect: undefined
    }
  },
  watch: {
    $route: {
      handler(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  created() {
    // this.getCode()
    // this.getCookie()
  },
  methods: {
    //验证码获取
    getCode() {
      // getCodeImg().then(res => {
      //   this.codeUrl = 'data:image/gif;base64,' + res.img
      //   this.loginForm.uuid = res.uuid
      // })
    },
    getCookie() {
      // const username = Cookies.get('username')
      // const password = Cookies.get('password')
      // const rememberMe = Cookies.get('rememberMe')
      // this.loginForm = {
      //   username: username === undefined ? this.loginForm.username : username,
      //   password:
      //     password === undefined ? this.loginForm.password : decrypt(password),
      //   rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
      // }
    },
    //登录方法
    handleLogin() {
      this.$refs.loginForm.validate(async valid => {
        console.log(valid)
        if (valid) {
          this.loading = true
          //登录方法请求
          const data = {
            admin_name: this.loginForm.admin_name.trim(),
            admin_password: this.loginForm.admin_password
            // admin_password: this.loginForm.admin_password
          }
          const { data: res } = await this.$api.admin.adminLogin(data)
          console.log(res)
          if (res.meta.status !== 200) {
            this.loading = false
            return this.$message.error({ message: res.meta.message })
          } else {
            this.loading = false
            this.$message.success({ message: res.meta.message })
            this.$store.commit('userInfo', res.data.userInfo)
            this.$store.commit('userToken', res.data.token)
            this.$utils.local.set('activePath', '/index') //保存首页选中路径到localStorage缓存
            this.$router.push({ path: '/index' }) //登录成功跳转到首页
          }
          // if (this.loginForm.rememberMe) {
          //   // Cookies.set('username', this.loginForm.username, { expires: 30 })
          //   // Cookies.set('password', encrypt(this.loginForm.password), {
          //   //   expires: 30
          //   // })
          //   // Cookies.set('rememberMe', this.loginForm.rememberMe, {
          //   //   expires: 30
          //   // })
          // } else {
          //   // Cookies.remove('username')
          //   // Cookies.remove('password')
          //   // Cookies.remove('rememberMe')
          // }
          // this.$store
          //   .dispatch('Login', this.loginForm)
          //   .then(() => {
          //     this.loading = false
          //     this.$router.push({ path: this.redirect || '/' })
          //   })
          //   .catch(() => {
          //     this.loading = false
          //     this.getCode()
          //   })
        } else {
          return false
        }
      })
    },
    //重置登录方法
    resetLogin() {
      this.loading = false
      this.$refs.loginForm.resetFields()
    }
  }
}
</script>
<style lang="sass" scoped>
.login
  display: flex
  justify-content: center
  align-items: center
  height: 100%
  // background-image: url("~@/assets/images/login-background.jpg")
  background-size: cover

.title
  margin: 0px auto 30px auto
  text-align: center
  color: #707070

.login-form
  border-radius: 6px
  background: #fff
  width: 400px
  padding: 25px 25px 5px 25px
  .el-input
    input
      // height: 38px

.login-tip
  font-size: 13px
  text-align: center
  color: #bfbfbf

.login-code
  width: 33%
  height: 38px
  float: right
  img
    cursor: pointer
    vertical-align: middle

.login-reset
  text-align: right

.el-login-footer
  height: 40px
  line-height: 40px
  position: fixed
  bottom: 0
  width: 100%
  text-align: center
  color: #fff
  font-family: Arial
  font-size: 12px
  letter-spacing: 1px
</style>